<template>
	<view class="container">
		<!-- 顶端 -->
		<view class="nav-bar">
			<!-- 任务1：返回箭头 -->
			<text class="back" @click="goBack">&#60;</text>
			<!-- 任务2：城市选择 -->
			<text class="title" @click="goCities" v-if="city">{{ city }}</text>
			<!-- 任务3：当日天气 -->
			<text class="weather" v-if="weather">{{ weather.weather }}，{{ weather.temperature }}℃</text>
		</view>
		<!-- 任务4：轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
			<swiper-item class="rotation" v-for="(rotation, index) in rotationList">
				<image class="image" mode="scaleToFill" :src="rotation.advImg | imagePathCompletion"
					@click="goPress(rotation.targetId)" />
				<text class="title">{{ rotation.advTitle }}</text>
			</swiper-item>
		</swiper>
		<!-- 任务5：栏目 -->
		<view class="columns">
			<view class="column" v-for="(column, index) in columnList" :key="index" @click="goColumn(column.page)">
				<image class="image" mode="aspectFill" :src="column.image" />
				<text class="name">{{ column.title }}</text>
			</view>
		</view>
		<!-- 9：底部导航 -->
		<tab-bar :list="tabList" />
	</view>
</template>

<script>
	import {
		getLocation,
		getWeather
	} from '@/api/common.js'
	import {
		getRotationList
	} from '@/api/metro.js'
	export default {
		data() {
			return {
				city: null,

				weather: null,

				rotationList: null,

				columnList: [{
					title: '站点查询',
					image: '/static/metro/zdcx.jpg',
					page: '/pages/metro/step'
				}, {
					title: '线路查询',
					image: '/static/metro/xlcx.jpg',
					page: '/pages/metro/line'
				}, {
					title: '乘车须知',
					image: '/static/metro/ccxz.jpg',
					page: '/pages/metro/know'
				}, {
					title: '运营公告',
					image: '/static/metro/yygg.jpg',
					page: '/pages/metro/notice'
				}],
				
				tabList: [{
					"pagePath": "pages/index/index",
					"iconPath": "/static/menu/syg.png",
					"selectedIconPath": "/static/menu/sy.png",
					"text": "首页"
				}, {
					"pagePath": "pages/service/index",
					"iconPath": "/static/menu/fwg.png",
					"selectedIconPath": "/static/menu/fw.png",
					"text": "全部服务"
				}, {
					"pagePath": "pages/poor/index",
					"iconPath": "/static/menu/fpg.png",
					"selectedIconPath": "/static/menu/fp.png",
					"text": "精准扶贫"
				}, {
					"pagePath": "pages/press/index",
					"iconPath": "/static/menu/xwg.png",
					"selectedIconPath": "/static/menu/xw.png",
					"text": "新闻"
				}, {
					"pagePath": "pages/user/index",
					"iconPath": "/static/menu/zxg.png",
					"selectedIconPath": "/static/menu/zx.png",
					"text": "个人中心"
				}]
			}
		},
		onLoad(options) {
			if (options.city) {
				this.city = options.city;
			} else {
				this.getLocation();
			}
			this.getWeather();
			this.getRotationList();
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 获取当前定位
			getLocation() {
				const _that = this;
				getLocation()
					.then((res) => {
						_that.city = res.data.city;
					});
			},
			// 跳转到城市选择
			goCities() {
				uni.navigateTo({
					url: '/pages/metro/city'
				});
			},
			// 获取天气
			getWeather() {
				const _that = this;
				getWeather()
					.then((res) => {
						_that.weather = res.data;
					});
			},
			// 获取广告轮播列表
			getRotationList() {
				const _that = this;
				getRotationList()
					.then((res) => {
						_that.rotationList = res.rows;
					})
					.catch(() => {
						uni.showToast({
							title: '加载异常'
						})
					})
			},
			// 跳转到新闻资讯详情
			goPress(id) {
				uni.navigateTo({
					url: `/pages/press/detail?id=${id}`
				});
			},
			// 跳转到栏目
			goColumn(page) {
				uni.navigateTo({
					url: page
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.swiper {
			width: 100vw;
			height: 50vw;

			.rotation {
				width: 100vw;
				height: 50vw;
				overflow: hidden;
				position: relative;

				.image {
					width: 100vw;
					height: 50vw;
				}

				.title {
					position: absolute;
					width: 96%;
					height: 2em;
					padding: 0 2% 18px;
					color: white;
					line-height: 2em;
					overflow: hidden;
					background-color: rgba(0, 0, 0, 0.4);
					left: 0;
					bottom: 0;
					z-index: 9999;
				}
			}
		}

		.columns {
			width: 94vw;
			overflow: hidden;
			padding: 0.6rem 3vw;
			margin: 0.6rem 0;
			background-color: $uni-bg-color;
			display: flex;
			justify-content: space-between;

			.column {
				width: 22vw;
				height: calc(14vw + 1.6rem);
				text-align: center;

				.image {
					width: 14vw;
					height: 14vw;
					border-radius: 14vw;
				}

				.name {
					width: 22vw;
					height: 1.6rem;
					font-size: 0.9rem;
					line-height: 1.6rem;
					display: block;
				}
			}
		}
	}
</style>
